
import { ExtractPropTypes } from 'vue'
import { validatorColorValue, validatorSizeValue, validatorTransparentColor } from '../../utils'
import { UPDATE_MODEL_EVENT } from '../../constants'

/**
 * 底部导航Item类型
 */
export type TabbarItem = {
  title: string,
  icon: string,
  activeIcon: string,
  bulge?: boolean,
  color?: string,
  activeColor?: string,
  iconSize?: string | number,
  fontSize?: string | number,
}

/**
 * Props
 */
export const tabbarProps = {
  /** 当前选中的tabbarIndex */
  modelValue: {
    type: [String, Number],
    default: 0
  },
  /** tabbar列表 */
  data: {
    type: Array,
    default() {
      return []
    }
  },
  /** 是否显示tabbar */
  show: {
    type: Boolean,
    default: true
  },
  /** 高度, 默认单位rpx */
  height: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 凸起按钮的高度, 默认单位rpx */
  bulgeHeight: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 图标大小, 默认单位rpx */
  iconSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 字体大小, 默认单位rpx */
  fontSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  bgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 激活时字体颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  activeColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 毛玻璃效果, 设置后bgColor属性失效 */
  frostedGlass: {
    type: Boolean,
    default: false
  },
  /** 毛玻璃背景颜色, frostedGlass为true时有效, 必须带透明度 */
  frostedGlassColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorTransparentColor(value)
    }
  },
  /** 显示阴影 */
  shadow: {
    type: Boolean,
    default: true
  },
  /** 点击动画 */
  animation: {
    type: Boolean,
    default: false
  },
  /** 固定在底部 */
  fixed: {
    type: Boolean,
    default: true
  },
  /** 开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 */
  safeAreaInsetBottom: {
    type: Boolean,
    default: true
  },
  /** zIndex */
  zIndex: {
    type: [String, Number],
    default: ''
  },
  /** 切换item前回调 */
  beforeSwitch: {
    type: Function,
    default: null
  }
}
export type TabbarProps = ExtractPropTypes<typeof tabbarProps>

export const tabbarEmits = {
  [UPDATE_MODEL_EVENT]: 
    (value: string | number) => 
      typeof value === 'string' || typeof value === 'number',
  change: 
    (value: number) => typeof value === 'number',
}
export type TabbarEmits = typeof tabbarEmits
